<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <div>
          <a-form style="width: 100% !important" size="small" :model="queryData" layout="inline">
            <a-form-item label="原料编号" v-if="permissionStore.hasPermisson('ylllb.dclcx') ||
        permissionStore.hasPermisson('ylllb.yclcx')
        ">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder="" v-model="yuanliaobianhao"
                @press-enter="huiche" />
            </a-form-item>
            <a-form-item label="原料名称" v-if="permissionStore.hasPermisson('ylllb.dclcx') ||
        permissionStore.hasPermisson('ylllb.yclcx')
        ">
              <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder=""
                v-model="yuanliaomingcheng" @press-enter="huiche" />
            </a-form-item>
          </a-form>
        </div>

        <div class="my-tool-bar">
          <Toolbar v-if="biaoji == 1" :items="[
        `${permissionStore.hasPermisson('ylllb.dclcx') ? '查询' : ''}`,
        `${permissionStore.hasPermisson('ylllb.dclxz') ? '新增' : ''}`,
        `${permissionStore.hasPermisson('ylllb.dclfz') ? '复制' : ''}`,
        `${permissionStore.hasPermisson('ylllb.dclcc') ? '导出' : ''}`,
        `${permissionStore.hasPermisson('ylllb.dclsc') ? '删除' : ''}`,
        `${permissionStore.hasPermisson('ylllb.dclsh') ? '审核' : ''}`,
      ]" @add="addHandler" @copy="fuzhi('待审核')" @del="deleteHandler('待审核')" @select="selectHandler" @export="exports"
            @audit="shenhe">
          </Toolbar>
          <Toolbar v-if="biaoji == 2" :items="[
        `${permissionStore.hasPermisson('ylllb.yclcx') ? '查询' : ''}`,
        `${permissionStore.hasPermisson('ylllb.yclxz') ? '新增' : ''}`,
        `${permissionStore.hasPermisson('ylllb.yclfs') ? '复制' : ''}`,
        `${permissionStore.hasPermisson('ylllb.ycldc') ? '导出' : ''}`,
        `${permissionStore.hasPermisson('ylllb.yclfs') ? '反审' : ''}`,
      ]" @add="addHandler" @copy="fuzhi('已审核')" @del="deleteHandler('已审核')" @select="selectHandler" @export="exports"
            @counter="fanshen">
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>

    <template #pageTabel>
      <a-tabs :lazy-load="true" :justify="true" default-active-key="1" @change="handoff">
        <a-tab-pane title="待审核" key="1">
          <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
            <div :style="{ height: '100%', width: '100%' }" style="background: #fff">
              <encapsulation-agrid ref="table1Ref" :configaggrid="configaggrid"></encapsulation-agrid>
            </div>
          </a-spin>
        </a-tab-pane>
        <a-tab-pane title="已审核" key="2">
          <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
            <div :style="{ height: '100%', width: '100%' }" style="background: #fff">
              <encapsulation-agrid ref="table3Ref" :configaggrid="configaggrid3"></encapsulation-agrid>
            </div>
          </a-spin>
        </a-tab-pane>
      </a-tabs>
    </template>
    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 999 }" :mask-closable="false"
      :width="400" unmount-on-close popup-container=".arco-tabs-content" height="100%" :visible="pageData.showAdd"
      :ok-loading="pageData.pageLoading" placement="bottom" @ok="sideOk" @cancel="pageData.showAdd = false"
      @close="handlerDrawerClose">

      <template #title>
        {{ pageData.sideTitle }}
      </template>

      <template #footer>
        <a-button @click="pageData.showAdd = false"> 关闭</a-button>
        <a-button type="primary" @click="sideOk" v-if="pageData.sideTitle != '详情'"> 保存</a-button>
      </template>
      <!-- 基本信息 -->
      <div style="width: 1540px; overflow: auto">
        <el-scrollbar>
          <a-collapse :default-active-key="[1]" @change="handleCollapseChange">
            <a-collapse-item header="基本信息" :key="1">
              <a-form ref="formRef" layout="inline" size="mini" :model="dataForm" :label-col-props="{ span: 10 }"
                :wrapper-col-props="{ span: 14 }" :rules="rules">
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="原料编号" field="rawmaterialCode"
                  :disabled="dataForm.outsideState == 0 && pageData.isDetails == false ? true : false
        " key="rawmaterialCode" :validate-trigger="['change', 'blur']">
                  <a-input :class="{ bacClass: true }" :disabled="pageData.isDetails"
                    v-model="dataForm.rawmaterialCode" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="原料名称" field="materialsName"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="materialsName">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.materialsName" />
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="原料类别" field="materialsCategory"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="materialsCategory">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.materialsCategory" @focus="foucus4" @change="materialsCateChanges"
                    @search="getProductTypeDrop">
                    <a-option v-for="item in pageData.ProductTypeDrop" :key="item['id']"
                      :value="item['materialsCategoryName']">{{ item['materialsCategoryName'] }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="纱支" field="yarnCount"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="yarnCount">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.yarnCount" @change="yarnCountChange" @focus="foucus1" @search="getYarnDrop">
                    <a-option v-for="item in pageData.YarnDrop" :key="item['id']" :value="item['yarnCount']">{{
        item['yarnCount']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="丹尼尔系数" field="daniel"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="daniel">
                  <a-input-number :class="{ bacClass: true }" v-model="dataForm.daniel" :precision="1"
                    :disabled="pageData.isEditDne" />
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="属性" field="materialsAttribute"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="materialsAttribute">
                  <a-select popup-container="html" allow-search allow-clear :class="{ bacClass: true }"
                    @focus="getYlAttribute('')" v-model="dataForm.materialsAttribute" @change="changeAttribute"
                    @search="getYlAttribute">
                    <a-option v-for="item in pageData.attributeList" :value="item.materialsAttribute" :key="item.id">{{
        item.materialsAttribute
      }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="F数" field="fNum"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="fNum">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.fNum" @focus="foucus5" @blur="fieldChange" @change="DanielS">
                    <a-option v-for="item in pageData.FsData['4']" :key="item.id" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="材料损耗类型" field="attritionCategory"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="attritionCategory">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.attritionCategory" @focus="foucusSunhaolv" @input-value-change="cailiaoSearch">
                    <a-option @click="isSunhaolv(item)" v-for="item in sunhaolvlist"
                      :key="item.materialsAttritionCategory" :value="item['materialsAttritionCategory']">{{
        item['materialsAttritionCategory']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="捻向" field="direction"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="direction">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.direction" @focus="foucus5">
                    <a-option v-for="item in pageData.FsData['5']" :key="item.id" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="材料损耗率"
                  :validate-trigger="['change', 'blur']" field="property" :disabled="pageData.isDetails" key="property">
                  <a-input disabled :class="{ bacClass: true }" v-model="dataForm.property" />
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="外观描述"
                  :validate-trigger="['change', 'blur']" field="appearance" :disabled="pageData.isDetails"
                  key="appearance">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.appearance" @focus="foucus5" @change="fieldChange">
                    <a-option v-for="item in pageData.FsData['13']" :key="item.id" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="纺纱纺法" field="spinningMethod"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="spinningMethod">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.spinningMethod" @focus="foucus5" @change="fieldChange">
                    <a-option v-for="item in pageData.FsData['3']" :key="item.id" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="光泽" field="gloss"
                  :validate-trigger="['change', 'blur']" :disabled="pageData.isDetails" key="gloss">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.gloss" @focus="foucus5">
                    <a-option v-for="item in pageData.FsData['6']" :key="item.id" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="梳棉工艺"
                  :validate-trigger="['change', 'blur']" field="craft" :disabled="pageData.isDetails" key="craft">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.craft" @focus="foucus5" @blur="fieldChange">
                    <a-option v-for="item in pageData.FsData['8']" :key="item.id" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="是否本集团" field="outsideState"
                  :disabled="pageData.isDetails" :validate-trigger="['change', 'blur']" key="outsideState">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }"
                    v-model="dataForm.outsideState" disabled @change="changeState">
                    <a-option :value="0">本集团</a-option>
                    <a-option :value="1">外加工</a-option>
                  </a-select>
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="单位" field="unit"
                  :disabled="pageData.isDetails">
                  <a-select popup-container="html" :class="{ bacClass: true }" allow-clear v-model="dataForm.unit"
                    :filter-option="false" allow-search @search="handleSearch3" @focus="foucus3">
                    <a-option v-for="item in pageData.ProductUnitDrop" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                  <!-- <a-input :class="{'bacClass':(!pageData.isDetails)}" placeholder="请输入单位" v-model="dataForm.unit" /> -->
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" v-if="no1TypeMeterials == 0"
                  label="纱支(数值)" field="yarnCountNum" :disabled="pageData.isDetails">
                  <a-input-number class="input-demo" :class="{ bacClass: true }" :precision="2"
                    v-model="dataForm.yarnCountNum" />
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" v-else-if="no1TypeMeterials == 1"
                  label="纱支(数值)" field="yarnCountNum" :disabled="pageData.isDetails"
                  :validate-trigger="['change', 'blur']">
                  <a-input-number class="input-demo" :class="{ bacClass: true }" :precision="2"
                    v-model="dataForm.yarnCountNum" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" v-if="no2TypeMeterials == 0"
                  label="纱线类别" field="yarnType" :disabled="pageData.isDetails">
                  <a-input v-model="dataForm.yarnType" :class="{ bacClass: true }" />
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" v-else-if="no2TypeMeterials == 1"
                  label="纱线类别" field="yarnType" :disabled="pageData.isDetails"
                  :rules="[{ required: true, message: '纱线类别必填' }]" :validate-trigger="['change', 'blur']">
                  <a-input v-model="dataForm.yarnType" :class="{ bacClass: true }" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="英文名称"
                  field="materialsEnglishName" :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.materialsEnglishName" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="颜色" field="color"
                  :disabled="pageData.isDetails">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.color" @focus="foucus2" @search="getColorDrop">
                    <a-option v-for="item in (pageData.ColorDrop as any)" :key="item.id" :value="item.colorName">{{
        item.colorName
      }}
                    </a-option>
                  </a-select>
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="中文成分" field="chineseIngredient"
                  :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.chineseIngredient" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="规格型号" field="model"
                  :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.model" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="英文成分" field="englishIngredient"
                  :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.englishIngredient" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="纱支单位" field="yarnCountType"
                  :disabled="pageData.isDetails">
                  <a-select popup-container="html" :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.yarnCountType" @focus="focusYarnCountType" allow-search
                    @search="YarnCountTypeSearch">
                    <a-option v-for="item in pageData.yarnCountList" :key="item.id" :value="item['typeName']">{{
        item['typeName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="股数" field="strandNum"
                  :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.strandNum" />
                </a-form-item>
                <a-form-item :style="{ width: '1084px' }" label-col-flex="100px" label="备注说明" field="basicRemark"
                  :disabled="pageData.isDetails">
                  <a-textarea :class="{ bacClass: true }" placeholder="" v-model="dataForm.basicRemark"
                    :max-length="400" allow-clear show-word-limit />
                </a-form-item>
              </a-form>
            </a-collapse-item>
            <!-- 附属信息 -->
            <a-collapse-item header="附属信息" :key="2">
              <a-form layout="inline" size="mini" :model="dataForm" :label-col-props="{ span: 10 }"
                :wrapper-col-props="{ span: 14 }">
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="棉比例系数" field="cottonRatio"
                  :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.cottonRatio" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="并线" field="doubling"
                  :disabled="pageData.isDetails">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.doubling" @focus="foucus5">
                    <a-option v-for="item in pageData.FsData['9']" :key="item.id" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="混纺系数" field="blending"
                  :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.blending" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="捻度" field="twist"
                  :disabled="pageData.isDetails">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.twist" @focus="foucus5">
                    <a-option v-for="item in pageData.FsData['10']" :key="item.id" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="储存条件" field="reserve"
                  :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.reserve" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="功能描述" field="funtions"
                  :disabled="pageData.isDetails">
                  <a-select popup-container="html" allow-search :class="{ bacClass: true }" allow-clear
                    v-model="dataForm.funtions" @focus="foucus5">
                    <a-option v-for="item in pageData.FsData['12']" :key="item.id" :value="item['detailName']">{{
        item['detailName']
      }}
                    </a-option>
                  </a-select>
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="库存上限" field="inventoryMax"
                  :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.inventoryMax" />
                </a-form-item>

                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="库存下限" field="inventoryMin"
                  :disabled="pageData.isDetails">
                  <a-input :class="{ bacClass: true }" v-model="dataForm.inventoryMin" />
                </a-form-item>
                <a-form-item :style="{ width: '345px' }" label-col-flex="100px" label="混纺纱比例" field="blendRatio">
                  <a-input :class="{ bacClass: true }" v-model="blendRatio" />
                </a-form-item>
              </a-form>
            </a-collapse-item>
            <!-- 成分 -->
            <!-- <a-tab-pane :key="3" title="成分"> -->
            <a-collapse-item header="成分" :key="3">
              <a-space style="margin-bottom: 10px" v-if="!pageData.isDetails">
                <a-button type="primary" @click="addLine" size="mini">新增</a-button>
                <a-button type="primary" @click="delLine" size="mini">删除</a-button>
              </a-space>
              <div :style="{ height: '260px', padding: '10px' }" style="background: #fff">
                <encapsulation-agrid ref="table2Ref" :configaggrid="configaggrid2"></encapsulation-agrid>
              </div>
            </a-collapse-item>
          </a-collapse>
        </el-scrollbar>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts">
import { post, get } from '@/api/http'
import { usePagination, useRowKey, useRowSelection, useTable, useTableColumn } from '@/hooks/table'
import { onMounted, reactive, ref, nextTick, watch } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { Message, Modal } from '@arco-design/web-vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import emitter from '@/hooks/useEventBus'
import usePermission from '@/store/modules/permission'

import { listenerCount } from 'process'
import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import { unique } from 'element-plus/es/utils'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
import { saveOrUpdateGridState as saveOrUpdateGridState02 } from '@/hooks/useGridState'
import { saveOrUpdateGridState as saveOrUpdateGridState03 } from '@/hooks/useGridState'
import { tableColumns } from "@/views/FixedAssetsManagement/DeviceTypeAllocationSettings/DeviceTypeAllocationSettings";
import buttionRender from "@/components/aggridCellRenDerer/buttionRender.vue";

interface Firm {
  name: string
  id: number
}

interface RawMaterialsList {
  attritionCategory: string | undefined
  craft: string | undefined
  cottonRatio: string | undefined
  inventoryMax: string | undefined
  firm: string | undefined
  property: string | undefined
  // season: string | undefined
  model: string | undefined
  id: any
  blending: string | undefined
  materialsEnglishName: string | undefined
  yarnCountType: string | undefined
  updateName: string | undefined
  inventoryMin: string | undefined
  daniel: any
  unit: string | undefined
  yarnCountNum: any
  materialsCategory: string | undefined
  spinningMethod: string | undefined
  individualOrPiece: string | undefined
  twist: string | undefined
  createName: string | undefined
  rawmaterialCode: any
  color: any
  doubling: string | undefined
  remark: string | undefined
  pieceWeight: string | undefined
  shares: string | undefined
  gloss: string | undefined
  reserve: string | undefined
  materialsName: string | undefined
  deleteState: number | undefined
  direction: string | undefined
  yarnCount: any
  englishIngredient: string | undefined
  componentRatio: string | undefined
  chineseIngredient: string | undefined
  updateTime: string | undefined
  fNum: any
  appearance: string | undefined
  equip: string | undefined
  createTime: string | undefined
  yarnType: string | undefined
  materialsAttribute: string | undefined
  funtions: string | undefined
  basicRemark: string | undefined
  extendRemark: string | undefined
  ratio: string | undefined
  giveGuestState: number | undefined
  deadState: number | undefined
  component: any
  outsideState: number
  colorName: any
  colorNumber: any
  brandName: any
}

export default {
  name: 'RawMaterialsList',
  setup() {
    const handlerDrawerClose = () => {
      for (let key in dataForm) {
        dataForm[key] = ''
      }
      console.log('关闭', dataForm)
      doRefresh()
    }
    const permissionStore = usePermission()
    const pageData = reactive<{
      gcList: Firm[]
      pageLoading: boolean
      showAdd: boolean
      sideTitle: string
      rHeight: number | undefined
      keysNum: any
      edit1: boolean
      edit2: boolean
      edit3: boolean
      edit4: boolean
      edit5: boolean
      codeList: []
      nameList: []
      nameList1: []
      ggList: []
      flList: []
      dropDownData: any
      dropDownData1: any
      dropDownData2: any
      dropDownData3: any
      dropDownData4: any
      ProductUnitDrop: []
      ProductTypeDrop: []
      ColorDrop: []
      YarnDrop: []
      FsData: {}
      CfData: []
      btnList: any[]
      isEdit: boolean
      isEdit1: boolean
      isEdit2: boolean
      isCfxz: boolean
      isCfsc: boolean
      isfuzhi: boolean
      yarnNames: any[]
      attributeList: any[]
      isFill: boolean
      isEditDne: boolean
      yarnCountList: any[]
      zhong: any
      yin: any
      isDetails: boolean
      isInfo: boolean
    }>({
      gcList: [],
      pageLoading: false,
      showAdd: false,
      sideTitle: '新增原料',
      rHeight: 0,
      keysNum: 1,
      edit1: false,
      edit2: false,
      edit3: false,
      edit4: false,
      edit5: false,
      codeList: [],
      nameList: [],
      nameList1: [],
      ggList: [],
      flList: [],
      dropDownData: '',
      dropDownData1: '',
      dropDownData2: '',
      dropDownData3: '',
      dropDownData4: '',
      ProductUnitDrop: [],
      ProductTypeDrop: [],
      ColorDrop: [],
      YarnDrop: [],
      FsData: {},
      CfData: [],
      btnList: [],
      isEdit: false,
      isEdit1: false,
      isEdit2: false,
      isCfxz: false,
      isCfsc: false,
      isfuzhi: false,
      yarnNames: [],
      attributeList: [],
      isFill: false,
      isEditDne: false,
      yarnCountList: [],
      zhong: '',
      yin: '',
      isDetails: false,
      isInfo: false,
    })
    const handleCollapseChange = (key: any) => {
      if (key.includes(3) && (pageData.sideTitle == '修改原料' || pageData.sideTitle == '详情' || pageData.sideTitle == '新增复制')) {
        table2Ref.value.setdataListIterface(idToData[0]['component'])
      }
    }
    const yuanliaobianhao = ref('')
    const yuanliaomingcheng = ref('')
    const table1Ref: any = ref(null)
    const biaoji = ref(1)
    //设置权限
    // ['查询', '新增', '删除', '导出', '导入']
    if (biaoji.value == 1) {
      pageData.btnList = []
      pageData.isEdit = false
      // if (permissionStore.hasPermisson('ylllb.xz')) {

      //   pageData.btnList.push("查询")
      // }
      // if (permissionStore.hasPermisson('ylllb.xz')) {
      //   pageData.btnList.push("新增")
      // }
      // if (permissionStore.hasPermisson('ylllb.sc')) {
      //   pageData.btnList.push("删除")
      // }
      // if (permissionStore.hasPermisson('ylllb.dc')) {
      //   pageData.btnList.push("导出")
      // }
      // if (permissionStore.hasPermisson('ylllb.fz')) {
      //   pageData.btnList.push("复制")
      // }
      // if (permissionStore.hasPermisson('ylllb.sh')) {
      //   pageData.btnList.push("审核")
      // }
      if (permissionStore.hasPermisson('ylllb.dclxg')) {
        pageData.isEdit = true
        console.log('pageData.isEdit', pageData.isEdit)
      }
      if (permissionStore.hasPermisson('ylllb.dclxq')) {
        pageData.isInfo = true
      }
    } else if (biaoji.value == 2) {
      pageData.btnList = []
      pageData.isEdit = false
      if (permissionStore.hasPermisson('ylllb.yclxq')) {
        pageData.isInfo = true
      }
    }
    //主表格信息
    const tableColumns = [
      {
        headerCheckboxSelection: true,
        checkboxSelection: true,
        width: 60,
        showDisabledCheckboxes: false,
        pinned: 'left',
      },
      {
        headerName: '原料编码',
        field: 'rawmaterialCode',
        width: 150,
      },
      {
        headerName: '是否本集团',
        field: 'outsideState',
        width: 150,
        cellRenderer: {
          template: `
            <a-button v-if="states == 0" status="success">本集团</a-button>
            <a-button v-else >外加工</a-button>
            `,
          setup(props: any) {
            return {
              states: props.params.data.outsideState,
            }
          },
        },
        filterParams: {
          valueFormatter: function (params: any) {
            return params.value == '0'
              ? '本集团'
              : params.value == '1'
                ? '外加工' : ''
          },
        },
      },
      {
        headerName: '原料名称',
        field: 'materialsName',
        width: 150,
      },
      {
        headerName: '规格',
        field: 'model',
        width: 150,
      },
      {
        headerName: '原料类型',
        field: 'materialsCategory',
        width: 150,
      },
      {
        headerName: '库存单位',
        field: 'unit',
        width: 150,
      },
      {
        headerName: '创建人',
        field: 'createName',
        width: 150,
      },
      {
        headerName: '创建时间',
        field: 'createTime',
        width: 200,
      },
      {
        headerName: '最后修改人',
        field: 'updateName',
        width: 150,
      },
      {
        headerName: '最后修改时间',
        field: 'updateTime',
        width: 200,
      },
      {
        headerName: '编辑',
        field: 'edit',
        slotName: 'edit',
        width: 300,
        pinned: 'right',
        cellRenderer: buttionRender,
        cellRendererParams: {
          buttonList: [
            {
              type: 'primary',
              text: '修改',
              typeName: 'el-button',
              show: pageData.isEdit,
              Callback: (data: any) => {
                editHandler(data, 1)
              },
            },
            {
              type: 'primary',
              text: '详情',
              typeName: 'el-button',
              show: pageData.isInfo,
              Callback: (data: any) => {
                editHandler(data, 2)
              },
            },
          ],
          eltagSize: 0,
        },
      },
    ]
    let configaggrid = ref({
      url: 'product/Rawmaterial/getPageInfo', //接口路径
      queryData: {
        deleteState: '0',
        auditState: 0,
        rawmaterialCode: yuanliaobianhao.value,
        materialsName: yuanliaomingcheng.value,
      },
      paginationShow: true, //分页是否显示
      invokeiIterface: true, //是否调用接口
      rowMultiSelectWithClick: true, //点击行是否多选
      column: tableColumns,
      fileName: 'RawMaterialsList-1'
    })
    const table2Ref: any = ref(null)
    //成分信息表格
    const tableColumns2 = [
      {
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50
      },
      {
        headerName: '序号',
        field: 'rawmaterialComponentCode',
        width: 150,
      },
      {
        headerName: '成分',
        field: 'ingredient',
        width: 255,
        cellRenderer: {
          template: `
            <a-select popup-container="html" :disabled="dis" allow-clear v-model="val.ingredient" allow-search
                      @search="getCfData" @focus="getCfData('')" @change="changeCf(val)" :class="{ bacClass: true }">
              <a-option v-for="item of CfData" :key="item.id">
                {{ item.partName }}
              </a-option>
            </a-select>`,
          setup(props: any) {
            const val = ref(props.params.data)
            return {
              getCfData,
              changeCf,
              CfData,
              val,
              dis: pageData.isDetails,
            }
          },
        },
      },
      {
        headerName: '英文成分',
        field: 'ingredientEnglish',
        width: 255,
        cellRenderer: {
          template: `
            <a-input v-model="val.ingredientEnglish" :class="{ bacClass: true }"
                     :disabled="dis"/>`,
          setup(props: any) {
            const val = ref(props.params.data)
            return {
              val,
              dis: pageData.isDetails
            }
          },
        },
      },
      {
        headerName: '比例(%)',
        field: 'componentcottonRatio',
        width: 255,
        cellRenderer: {
          template: `
            <a-input-number v-model="val.componentcottonRatio" @blur="b"
                            :disabled="dis" class="input-demo" :class="{ bacClass: true }" :min="0" :max="100"
                            :precision="0"/>`,
          setup(props: any) {
            const val = ref(props.params.data)
            const b = () => {
              fieldChange(val)
            }
            return {
              val,
              dis: pageData.isDetails,
              b
            }
          },
        },
      },
      {
        headerName: '回潮率',
        field: 'resurgence',
        width: 255,
        cellRenderer: {
          template: `
            <a-input :class="{ bacClass: true }" v-model="val.resurgence" :disabled="dis"/>`,
          setup(props: any) {
            const val = ref(props.params.data)
            return {
              props,
              val,
              dis: pageData.isDetails
            }
          },
        },
      },
      {
        headerName: '备注',
        field: 'componentRemark',
        width: 255,
        cellRenderer: {
          template: `
            <a-textarea :class="{ bacClass: true }" v-model="val.componentRemark" auto-size
                        :disabled="dis" :max-length="400" allow-clear show-word-limit/>`,
          setup(props: any) {
            const val = ref(props.params.data)
            return {
              val,
              dis: pageData.isDetails
            }
          },
        },
      },
    ]
    let configaggrid2 = ref({
      url: '', //接口路径
      queryData: {},
      paginationShow: false, //分页是否显示
      invokeiIterface: false, //是否调用接口
      rowMultiSelectWithClick: true, //点击行是否多选
      column: tableColumns2,
      fileName: 'RawMaterialsList-3'
    })
    const materialsNameRules = ref<any>(true)
    const CfData: any = ref([])
    const total = ref(0)
    const page = ref(1)
    const size = ref(10)
    const table3Ref: any = ref(null)
    const tableColumns3 = [
      {
        headerCheckboxSelection: true,
        checkboxSelection: true,
        width: 60,
        showDisabledCheckboxes: false,
        pinned: 'left',
      },
      {
        headerName: '原料编码',
        field: 'rawmaterialCode',
        width: 150,
      },
      {
        headerName: '是否本集团',
        field: 'outsideState',
        width: 150,
        cellRenderer: {
          template: `
            <a-button v-if="states == 0" status="success">本集团</a-button>
            <a-button v-else >外加工</a-button>
            `,
          setup(props: any) {
            return {
              states: props.params.data.outsideState,
            }
          },
        },
        filterParams: {
          valueFormatter: function (params: any) {
            return params.value == '0'
              ? '本集团'
              : params.value == '1'
                ? '外加工' : ''
          },
        },
      },
      {
        headerName: '原料名称',
        field: 'materialsName',
        width: 150,
      },
      {
        headerName: '规格',
        field: 'model',
        width: 150,
      },
      {
        headerName: '原料类型',
        field: 'materialsCategory',
        width: 150,
      },
      {
        headerName: '库存单位',
        field: 'unit',
        width: 150,
      },
      {
        headerName: '创建人',
        field: 'createName',
        width: 150,
      },
      {
        headerName: '创建时间',
        field: 'createTime',
        width: 200,
      },
      {
        headerName: '最后修改人',
        field: 'updateName',
        width: 150,
      },
      {
        headerName: '最后修改时间',
        field: 'updateTime',
        width: 200,
      },
      {
        headerName: '编辑',
        field: 'edit',
        slotName: 'edit',
        width: 300,
        pinned: 'right',
        cellRenderer: buttionRender,
        cellRendererParams: {
          buttonList: [
            {
              type: 'primary',
              text: '详情',
              typeName: 'el-button',
              show: pageData.isInfo,
              Callback: (data: any) => {
                editHandler(data, 3)
              },
            },
          ],
          eltagSize: 0,
        },
      },
    ]
    let configaggrid3 = ref({
      url: 'product/Rawmaterial/getPageInfo', //接口路径
      queryData: {
        deleteState: '0',
        auditState: 1,
        rawmaterialCode: yuanliaobianhao.value,
        materialsName: yuanliaomingcheng.value,
      },
      paginationShow: true, //分页是否显示
      invokeiIterface: false, //是否调用接口
      rowMultiSelectWithClick: true, //点击行是否多选
      column: tableColumns3,
      fileName: 'RawMaterialsList-2'
    })

    function PageSize(val: any) {
      page.value = val
      doRefresh()
    }

    function change1(val: any) {
      size.value = val
      doRefresh()
    }

    let gc = reactive([])
    const scrollbar = ref(true)
    let allDataList: any[] = []
    //弹窗表格数据
    let dataList2: any[] = []

    function doRefresh() {
      if (biaoji.value == 1) {
        table1Ref.value.setQuery({
          deleteState: '0',
          auditState: 0,
          rawmaterialCode: yuanliaobianhao.value,
          materialsName: yuanliaomingcheng.value,
        })
        return
      } else {
        table3Ref.value.setQuery({
          deleteState: '0',
          auditState: 1,
          rawmaterialCode: yuanliaobianhao.value,
          materialsName: yuanliaomingcheng.value,
        })
        return
      }
    }

    //主表勾选返回的id
    const { selectedRowKeys, onSelectionChange } = useRowSelection()
    //成分表勾选返回的id
    const selectedRowKeysCf = useRowSelection()
    const pagination = usePagination(doRefresh)
    const table = useTable()
    const rowKey = useRowKey('id')


    const gridOption = ref()
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
      colState.value = params.columnApi
    }

    const gridOption2 = ref()
    const colState2 = ref()
    const gridReady2 = (params: any) => {
      gridOption2.value = params.api
      colState2.value = params.columnApi
    }
    const gridOption3 = ref()
    const colState3 = ref()
    const gridReady3 = (params: any) => {
      gridOption3.value = params.api
      colState3.value = params.columnApi
    }
    //主表格信息
    const dataForm = reactive<RawMaterialsList>({
      id: null,
      rawmaterialCode: '',
      color: '',
      colorName: '',
      colorNumber: '',
      pieceWeight: '',
      inventoryMax: '',
      firm: '',
      model: '',
      materialsName: '',
      deleteState: 0,
      yarnCount: '',
      englishIngredient: '',
      materialsEnglishName: '',
      chineseIngredient: '',
      updateTime: '',
      yarnCountType: '',
      updateName: '',
      inventoryMin: '',
      unit: '',
      giveGuestState: 0,
      yarnCountNum: 0,
      materialsCategory: '',
      createTime: '',
      yarnType: '',
      materialsAttribute: '',
      deadState: 0,
      individualOrPiece: '',
      basicRemark: '',
      createName: '',
      attritionCategory: '',
      craft: '',
      doubling: '',
      extendRemark: '',
      cottonRatio: '',
      shares: '',
      gloss: '',
      property: '',
      reserve: '',
      //season: '',
      blending: '',
      direction: '',
      fNum: '',
      daniel: '',
      spinningMethod: '',
      appearance: '',
      equip: '',
      funtions: '',
      twist: '',
      componentRatio: '',
      remark: '',
      ratio: '',
      component: [],
      outsideState: 0,
      brandName: '',
      strandNum: '',//股数
    })
    const formRef = ref<any>('')
    onMounted(() => {
      //tw加

      // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
      doRefresh()
      // selCxAll({});
      // 切换tap到本页面执行的方法
      emitter.on('RawMaterialsList', () => {
        // selCxAll({});
        doRefresh()
      })
    })

    //查询
    const selectHandler = () => {
      page.value = 1
      doRefresh()
    }
    const queryData = reactive({
      firm: '',
    })
    const addHandler = () => {
      shifoubenjituan()
      isshow.value = true
      pageData.isDetails = false
      blendRatio.value = ''
      //清空值
      for (var key in dataForm) {
        if (key === 'id') {
          dataForm[key] = null
        } else if (
          key === 'deleteState' ||
          key === 'donationMoney' ||
          key === 'deleteDonation' ||
          key === 'outsideState'
        ) {
          dataForm[key] = 0
        } else {
          dataForm[key] = ''
        }
      }
      dataForm.component = []
      pageData.keysNum = 1
      pageData.showAdd = true
      pageData.sideTitle = '新增原料'
      pageData.zhong = ''
      pageData.yin = ''
    }
    let idToData: any[] = []
    //修改 record（本行数据）
    const editHandler = (record: any, num: number) => {
      // pageData.keysNum = num;
      isshow.value = true
      if (num == 2) {
        pageData.isDetails = true
        pageData.sideTitle = '详情'
      } else if (num == 3) {
        pageData.isDetails = true
        pageData.sideTitle = '详情'
        allDataList = table3Ref.value.getListData()
        idToData = allDataList.filter((item) => item.id == record.id)
        if (idToData.length > 0) {
          for (let key in idToData[0]) {
            dataForm[key] = idToData[0][key]
          }
        }
        //侧滑栏滑出滑入
        pageData.showAdd = true
        pageData.zhong = ''
        pageData.yin = ''
        increasingSerialNumber()
        return
      } else {
        pageData.isDetails = false
        pageData.sideTitle = '修改原料'
      }
      allDataList = table1Ref.value.getListData()
      idToData = allDataList.filter((item) => item.id == record.id)
      console.log('idToData', idToData)
      if (idToData.length > 0) {
        for (let key in idToData[0]) {
          dataForm[key] = idToData[0][key]
        }
      }

      //侧滑栏滑出滑入
      pageData.showAdd = true

      pageData.zhong = ''
      pageData.yin = ''
      increasingSerialNumber()
    }
    watch(() => dataForm.materialsCategory, (newVal) => {
      nextTick(() => {
        materialsCateChanges(newVal)
      })
    })
    const sideOk = () => {
      pageData.pageLoading = true
      formRef.value?.validate().then((err: any) => {
        if (!err) {
          if (pageData.sideTitle === '新增原料') {
            yuanliaoischongfu()
            //添加
            let blNum = 0
            let isZero = false

            for (let i = 0; i < dataForm['component'].length; i++) {
              if (
                dataForm['component'][i]['componentcottonRatio'] == 0 ||
                dataForm['component'][i]['componentcottonRatio'] == null ||
                dataForm['component'][i]['componentcottonRatio'] == undefined
              ) {
                isZero = true
                Message.warning({
                  content: '成分不能填0',
                  duration: 5000,
                })
                break
              }
              blNum += dataForm['component'][i]['componentcottonRatio']
              dataForm['component'][i]['id'] = null
              dataForm['component'][i]['add'] = undefined
              if (
                dataForm['component'][i].ingredient == undefined ||
                dataForm['component'][i].ingredient == ''
              ) {
                Message.warning({
                  content: '请先选择成分',
                  duration: 5000,
                })
                pageData.pageLoading = false
                return
              }
            }
            if (isZero) {
              pageData.pageLoading = false
              return
            }
            //tw加
            dataForm['blendRatio'] = blendRatio.value
            // -----

            if (dataForm['component'].length > 0 && blNum != 100) {
              Message.warning({
                content: '成分比例之和必须100',
                duration: 5000,
              })
              pageData.pageLoading = false
              return
            }

            let list = pageData.ColorDrop.filter(function (o: any) {
              return o['colorName'] == dataForm.color
            })
            if (list.length > 0) {
              dataForm['color'] = list[0]['colorName']
              dataForm['colorNumber'] = list[0]['colorNumber']
            }
            pageData.pageLoading = true

            post({
              url: 'product/Rawmaterial/add',
              data: dataForm,
            })
              .then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()
                  //清空弹窗表格里的数据
                  dataForm.component.length = 0
                  pageData.showAdd = false
                  Message.success({
                    content: '新增成功',
                    duration: 5000,
                  })
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
                doRefresh()
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          } else if (pageData.sideTitle === '修改原料') {
            let blNum = 0
            let isZero = false
            if (dataForm['component'].length == 0) {
              Message.warning({
                content: '请添加成分',
                duration: 5000,
              })
              pageData.pageLoading = false
              return
            }
            for (let i = 0; i < dataForm['component'].length; i++) {
              if (
                dataForm['component'][i]['componentcottonRatio'] == 0 ||
                dataForm['component'][i]['componentcottonRatio'] == null ||
                dataForm['component'][i]['componentcottonRatio'] == undefined
              ) {
                isZero = true
                Message.warning({
                  content: '成分不能填0',
                  duration: 5000,
                })
                break
              }
              blNum += dataForm['component'][i]['componentcottonRatio']
              if ((dataForm['component'][i]['id'] + '').indexOf('add') != -1) {
                dataForm['component'][i]['id'] = null
              }

              if (dataForm['component'][i].hasOwnProperty('add')) {
                dataForm['component'][i]['add'] = undefined
              }
            }
            if (isZero) {
              pageData.pageLoading = false
              return
            }
            if (blNum != 100 && dataForm['component'].length > 0) {
              Message.warning({
                content: '比例必须100',
                duration: 5000,
              })
              pageData.pageLoading = false
              return
            }
            //tw加
            if (isshow.value == false) {
              return
            }
            pageData.pageLoading = true
            //修改
            post({
              url: 'product/Rawmaterial/update',
              data: [dataForm],
            })
              .then(({ data, code, message }: any) => {
                if (code === 200) {
                  formRef.value?.resetFields()
                  Message.success({
                    content: '修改成功',
                    duration: 5000,
                  })
                  doRefresh()
                  pageData.showAdd = false
                } else {
                  Message.error({
                    content: message,
                    duration: 5000,
                  })
                }
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          } else if (pageData.sideTitle === '新增复制') {
            yuanliaoischongfu()
            baocunfuzhi()
          }
        } else {
          Message.error({
            content: '请填写完必填的表单信息',
            duration: 5000,
          })
          return
        }
      })
      pageData.pageLoading = false
    }
    const deleteHandler = (val: any) => {
      if (val == '待审核') {
        if (table1Ref.value.getSelectedRows().length === 0) {
          Message.error({
            content: '请先勾选',
            duration: 5000,
          })
          return
        }
        Modal.confirm({
          title: '系统提示',
          content: '确认删除选中的数据?',
          draggable: true,
          onOk() {
            pageData.pageLoading = true
            post({
              url: 'product/Rawmaterial/deleteZT',
              data: table1Ref.value.getSelectedRows().map((o: any) => {
                return o.id
              }),
            })
              .then(({ code, data, message }: any) => {
                if (code === 200) {
                  Message.success({
                    content: '删除成功',
                    duration: 5000,
                  })
                  pagination.page = 1
                  doRefresh()
                } else {
                  Message.error({
                    content: message,
                    duration: 5000,
                  })
                }
                selectedRowKeys.value = []
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          },
        })
      } else {
        if (table3Ref.value.getSelectedRows().length === 0) {
          Message.error({
            content: '请先勾选',
            duration: 5000,
          })
          return
        }
        Modal.confirm({
          title: '系统提示',
          content: '确认删除选中的数据?',
          draggable: true,
          onOk() {
            pageData.pageLoading = true
            post({
              url: 'product/Rawmaterial/deleteZT',
              data: table3Ref.value.getSelectedRows().map((o: any) => {
                return o.id
              }),
            })
              .then(({ code, data, message }: any) => {
                if (code === 200) {
                  Message.success({
                    content: '删除成功',
                    duration: 5000,
                  })
                  pagination.page = 1
                  doRefresh()
                } else {
                  Message.error({
                    content: message,
                    duration: 5000,
                  })
                }
                selectedRowKeys.value = []
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          },
        })
      }
    }
    const changeCf = (record: any) => {
      if (record['ingredient'] == '') {
        for (let key in record) {
          record[key] = ''
        }
      }
      //判断成份是否重复
      let list = dataForm.component.filter(function (o: any) {
        return o['ingredient'] == record.ingredient
      })
      if (list.length > 1) {
        record.ingredient = ''
        Message.warning({
          content: '成分不能重复',
          duration: 5000,
        })
        return
      }
      for (var i = 0; i < CfData.value.length; i++) {
        var ob = CfData.value[i]
        if (ob['partName'] == record.ingredient) {
          record.ingredientEnglish = ob['englishPartName']
          break
        }
      }
      getName(dataForm.yarnCount)
      zhongAndYin()
    }

    function zhongAndYin() {
      //基础信息 的中文成分和英文成分
      pageData.zhong = ''
      pageData.yin = ''
      dataForm.component.forEach(function (o: any) {
        if (pageData.zhong == '') {
          pageData.zhong = o['ingredient'] + o['componentcottonRatio'] + '%'
        } else {
          pageData.zhong += ' ' + o['ingredient'] + o['componentcottonRatio'] + '%'
        }
        if (pageData.yin == '') {
          pageData.yin = o['ingredientEnglish'] + o['componentcottonRatio'] + '%'
        } else {
          pageData.yin += ' ' + o['ingredientEnglish'] + o['componentcottonRatio'] + '%'
        }
      })
      dataForm.chineseIngredient = pageData.zhong
      dataForm.englishIngredient = pageData.yin
    }

    //成分添加一行 点击新增按钮
    let c = 0
    const addLine = () => {
      if (pageData.sideTitle === '新增原料') {
        dataForm.component = [
          ...dataForm.component,
          {
            id: 'add' + c++,
            rawmaterialComponentCode: '',
            infoId: 0,
            ingredient: '',
            ingredientEnglish: '',
            componentcottonRatio: 0,
            resurgence: '',
            componentRemark: '',
            add: true,
          }];
        table2Ref.value.setdataListIterface(dataForm.component)
      } else if (pageData.sideTitle === '修改原料' || pageData.sideTitle === '新增复制') {
        //判断是否有这个key
        if (idToData[0].hasOwnProperty('component')) {
          //在这个数组前面添加一行
          dataForm.component = [
            {
              id: 'add' + c++,
              rawmaterialComponentCode: '',
              infoId: idToData[0]['id'],
              ingredient: '',
              ingredientEnglish: '',
              componentcottonRatio: 0,
              resurgence: '',
              componentRemark: '',
              add: true,
            },
            ...dataForm.component,
          ]
          table2Ref.value.setdataListIterface(dataForm.component)
        } else {
          dataForm['component'] = []
          dataForm.component = [
            ...dataForm.component,
            {
              id: 'add' + c++,
              rawmaterialComponentCode: '',
              infoId: 0,
              ingredient: '',
              ingredientEnglish: '',
              componentcottonRatio: 0,
              resurgence: '',
              componentRemark: '',
              add: true,
            }];
          table2Ref.value.setdataListIterface(dataForm.component)
        }
      }
      increasingSerialNumber()
      getCfData('')
    }
    //成分 删除
    const delLine = () => {
      if (table2Ref.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return
      }
      let deleteId = dataForm.component.map((item: any) => item.id);
      let deleteIds = table2Ref.value.getSelectedRows().map((item: any) => item.id);
      console.log('deleteId', deleteId)
      console.log('deleteIds', deleteIds)
      let list = deleteId.filter((id: any) => deleteIds.includes(id));
      console.log('list', list)
      dataForm.component = dataForm.component.filter((item: any) => !list.includes(item.id));
      table2Ref.value.setdataListIterface(dataForm.component)
      // dataForm['component'] = dataForm['component'].filter(function (o: any) {
      //   return selectedRowKeysCf.selectedRowKeys.value.indexOf(o['id']) === -1
      // })
      // selectedRowKeysCf.selectedRowKeys.value = []
      increasingSerialNumber()
    }
    //判断是否填写了中文
    const isChiese = (value: string, cb: Function) => {
      return new Promise<void>((resolve) => {
        if (window.encodeURI(value).indexOf('%') !== -1) {
          cb('填写的值只能是英文数字组合或英文,数字！')
        }
        resolve()
      })
    }
    //input离开焦点 将小写转大写
    const inputBlur = () => {
      dataForm.rawmaterialCode = dataForm.rawmaterialCode.toUpperCase()
    }

    //查询单位下拉框
    const getProductUnitDrop = (val: any) => {
      post({
        url: 'dict/dictTypeDetail/getListByMap',
        data: {
          codeType: 17,
          detailName: val,
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            pageData.ProductUnitDrop = data
          }
        })
        .catch(console.log)
    }
    //查询产品类型下拉框
    const getProductTypeDrop = (ob: any) => {
      if (typeof ob == 'string') {
        ob = { materialsCategoryName: ob }
      }
      post({
        url: 'product/RawmaterialType/getInfoList',
        data: ob,
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            pageData.ProductTypeDrop = data
          }
        })
        .catch(console.log)
    }
    //查询颜色下拉框
    const getColorDrop = (ob: any) => {
      if (typeof ob == 'string') {
        ob = { colorName: ob }
      }

      post({
        // url: 'product/Rawmaterial/getColorDrop',
        url: '/product/color/getFieldValue',
        data: ob,
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            pageData.ColorDrop = data
          }
        })
        .catch(console.log)
    }
    //查询纱支下拉框
    const getYarnDrop = (ob: any) => {
      if (typeof ob == 'string') {
        ob = { yarnCount: ob }
      }
      post({
        url: 'product/yarn/getFieldValueMap',
        data: ob,
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            pageData.YarnDrop = data
          }
        })
        .catch(console.log)
    }
    //纱支查询
    const yarnCountChange = (val: any) => {
      pageData.YarnDrop.forEach(function (o) {
        if (o['yarnCount'] == val) {
          dataForm.yarnCountType = o['yarnUnit']
        }
      })
      // shengbianhao()

      getCode(dataForm.yarnCount, dataForm.materialsAttribute, dataForm.outsideState)
      getName(dataForm.yarnCount)
      //判断纱支是否带S 是则丹尼尔不可修改
      if (val.indexOf('S') != -1) {
        pageData.isEditDne = true
      } else {
        pageData.isEditDne = false
      }
      materialsNameRules.value = false
      DanielS()
    }

    const foucus1 = () => {
      getYarnDrop({ yarnCount: '' })
    }
    const foucus2 = () => {
      // getColorDrop({ colorName: '',auditState:1,obsoleteState:0 })
      getColorDrop({ colorName: '' })
    }
    const foucus3 = () => {
      getProductUnitDrop(null)
    }
    //下拉数据  单位
    const options3 = ref<any>(pageData.ProductUnitDrop)
    const loading3 = ref(false)
    const handleSearch3 = (value: any) => {
      if (value) {
        loading3.value = true
        getProductUnitDrop(value)
        options3.value = pageData.ProductUnitDrop
        loading3.value = false
      } else {
        options3.value = []
      }
    }
    const foucus4 = () => {
      getProductTypeDrop({ materialsCategoryName: '' })
    }
    const foucus5 = () => {
      getFsData([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13])
    }

    //附属信息查询
    const getFsData = (list: any) => {
      post({
        url: '/dict/dictTypeDetail/getListByCodeTypes',
        data: list,
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            pageData.FsData = data
          }
        })
        .catch(console.log)
    }
    //成分下拉框
    const getCfData = (e: any) => {
      post({
        url: 'product/RawmaterialComponent/getFieldValue',
        data: {
          partName: e == undefined ? '' : e,
        },
      })
        .then(({ data, code }: any) => {
          console.log(data)

          if (code === 200) {
            CfData.value = data = data
          }
        })
        .catch(console.log)
    }

    const yarnNamesClick = async (ob: any) => {
      const res = await post({
        url: 'product/Yarn/getFieldValue',
        data: {
          yarnName: ob,
        },
      })
      if (res.code == 200) {
        pageData.yarnNames = res.data
      }
    }
    const handleChange = (_data: any) => {
      table.handleSuccess(_data)
    }


    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      // flex: 1
    }

    function focusYlAttribute() {
      getYlAttribute('')
    }

    //拿到原料属性下拉框的数据
    const getYlAttribute = (ob: any) => {
      // post({
      //   url: 'dict/dictTypeDetail/getListByCodeType?codeType=18',
      // }).then((res: any) => {
      //   if (res.code == 200) {
      //     pageData.attributeList = res.data
      //   }
      // })
      //  post({
      //     url: '/product/RawmaterialAttribute/getDrop',
      //     data:{ "materialsCategory":""}
      //    }).then((res: any) => {
      //     if (res.code == 200) {
      //       pageData.attributeList = res.data
      //       pageData.attributeList=Array.from(new Set(pageData.attributeList))
      //     }
      //   })
      console.log(ob)

      if (typeof ob == 'object') {
        ob = ''
      }
      post({
        url: 'product/RawmaterialAttribute/getInfoDropValue',
        data: {
          materialsAttribute: ob,
        },
      }).then((res: any) => {
        if (res.code == 200) {
          console.log(res.data)
          pageData.attributeList = res.data
          pageData.attributeList = Array.from(new Set(pageData.attributeList))
        }
      })
      shengbianhao()
    }

    //获取生成的原料编码
    function getCode(yarnCount: any, materialsAttribute: any, outsideState: any) {
      if (yarnCount == '' || materialsAttribute == '') {
        return
      }
      // var ob = pageData.attributeList.filter((o) => {
      //   return o.detailName == materialsAttribute
      // })[0]
      // post({
      //   url: 'product/Rawmaterial/getCode',
      //   data: {
      //     yarnCount: yarnCount,
      //     materialsAttribute: materialsAttribute,
      //     outsideState: outsideState,
      //   },
      // }).then((res: any) => {
      //   if (res.code == 200) {
      //     dataForm.rawmaterialCode = res.data
      //   }
      // })
      shengbianhao()
    }

    //获取 生成原料名称
    function getName(yarnCount: any) {
      if (yarnCount == '') {
        return
      }
      dataForm.component.forEach(function (o: any) {
        o.id = undefined
      })
      post({
        url: 'product/Rawmaterial/getName',
        data: {
          yarnCount: yarnCount,
          fNum: dataForm.fNum,
          craft: dataForm.craft,
          appearance: dataForm.appearance,
          spinningMethod: dataForm.spinningMethod,
          component: dataForm.component,
          materialsAttribute:
            dataForm.materialsAttribute == '坯纱' ? '' : dataForm.materialsAttribute,
        },
      }).then((res: any) => {
        if (res.code == 200) {
          dataForm.materialsName = res.data
        }
      })
    }

    const changeState = (val: any) => {
      materialsCateChanges(dataForm.materialsCategory)

      //getCode(dataForm.yarnCount, dataForm.materialsAttribute, dataForm.outsideState)
      shengbianhao()
    }
    const changeAttribute = (val: any) => {
      //getCode(dataForm.yarnCount, dataForm.materialsAttribute, dataForm.outsideState)
      getName(dataForm.yarnCount)
      shengbianhao()
    }

    //纺纱纺法 外观描述 比例 梳棉工艺 f数  改变
    const fieldChange = (val: any) => {
      getName(dataForm.yarnCount)
      isshow.value = true
      nextTick(() => {
        let nums = 0
        dataForm.component.forEach(function (o: any) {
          nums += o['componentcottonRatio']
        })
        if (nums > 100) {
          Message.warning({
            content: '比例不能超过100',
            duration: 5000,
          })
          isshow.value = false
          val.componentcottonRatio = 0
        }
        zhongAndYin()
      })
    }
    //计算丹尼尔系数
    const DanielS = () => {
      //判断纱支是否只是数字
      //判断纱支里是否包含字母
      let regString = /[a-zA-Z]+/
      if (regString.test(dataForm.yarnCount)) {
        //纱支带字符串
        //丹尼尔带S
        if (dataForm.yarnCount.indexOf('S') != -1) {
          if (dataForm.yarnCount != '' && dataForm.fNum != '') {
            let fNum = parseFloat(dataForm.fNum?.split('/')[1])
            let yarnCount = parseFloat(
              dataForm.yarnCount.substring(0, dataForm.yarnCount?.length - 1)
            )
            //toFixed(3)保证数字不四舍五入
            let num = ((590.9 * 9) / yarnCount / fNum).toFixed(2)
            dataForm.daniel = parseFloat(num.substring(0, num.lastIndexOf('.') + 2))
          }
        } else {
          //不带S 直接截取掉最后一个字符
          dataForm.daniel = parseFloat(
            dataForm.yarnCount.substring(0, dataForm.yarnCount?.length - 1)
          )
        }
      } else {
        //纱支 是数字
        dataForm.daniel = parseFloat(dataForm.yarnCount)
      }
      dataForm.yarnCountNum = dataForm.daniel
    }
    //纱支类别 下拉框
    const focusYarnCountType = () => {
      getYarnCountType({ typeName: '', deleteState: 0 })
    }
    const optionsSearch = ref<any>(pageData.yarnCountList)
    const YarnCountTypeSearch = (value: any) => {
      if (value) {
        loading3.value = true
        getYarnCountType({ typeName: value })
        optionsSearch.value = pageData.yarnCountList
        loading3.value = false
      } else {
        optionsSearch.value = []
      }
    }
    //查询所有数据
    const getYarnCountType = (val: any) => {
      post({
        url: 'product/yarnType/getFieldValue',
        data: val,
      }).then((res: any) => {
        if (res.code == 200) {
          pageData.yarnCountList = res.data
        }
      })
    }
    //导出
    const exports = () => {
      let outRow: any = []
      if (biaoji.value == 1) {
        outRow = table1Ref.value.getSelectedRows()
      } else {
        outRow = table3Ref.value.getSelectedRows()
      }
      if (outRow.length === 0) {
        Message.error('请先勾选')
        return
      } else {
        //拿到勾选的主表

        //将表头拼接出来
        let head =
          '<th>原料编码</th><th>原料名称</th><th>规格</th><th>原料类型</th><th>库存单位</th>'
        head +=
          '<th>各成分占比</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>'
        let nowRow: any = []
        outRow.forEach(function (o: any) {
          if (o['component'].length == 0) {
            o['ingredientRatio'] = ''
            nowRow.push(o)
          } else {
            let pjCf = ''
            o['component'].forEach(function (e: any) {
              if (pjCf == '') {
                if (
                  e['ingredient'] != '' &&
                  e['ingredient'] != null &&
                  e['ingredient'] != undefined &&
                  e['componentcottonRatio'] != null &&
                  e['componentcottonRatio'] != 0 &&
                  e['componentcottonRatio'] != undefined
                ) {
                  pjCf = e['ingredient'] + e['componentcottonRatio'] + '%'
                }
              } else {
                if (
                  e['ingredient'] != '' &&
                  e['ingredient'] != null &&
                  e['ingredient'] != undefined &&
                  e['componentcottonRatio'] != null &&
                  e['componentcottonRatio'] != 0 &&
                  e['componentcottonRatio'] != undefined
                ) {
                  pjCf += '/' + e['ingredient'] + e['componentcottonRatio'] + '%'
                }
              }
            })
            o['ingredientRatio'] = pjCf
            nowRow.push(o)
          }
        })
        console.log(nowRow)

        let body = ''
        nowRow.forEach(function (o: any) {
          body += '<tr><td>' + o['rawmaterialCode'] + '</td>'
          body += '<td>' + o['materialsName'] + '</td>'
          body += '<td>' + o['model'] + '</td>'
          body += '<td>' + o['materialsCategory'] + '</td>'
          body += '<td>' + (o['unit'] == undefined ? '' : o['unit']) + '</td>'
          body += '<td>' + o['ingredientRatio'] + '</td>'

          body += '<td>' + o['createName'] + '</td>'
          body += '<td>' + o['createTime'] + '</td>'
          body += '<td>' + o['updateName'] + '</td>'
          body += '<td>' + o['updateTime'] + '</td>'
          body += '</tr>'
        })
        tableToXlsx(head, '原料列表', body)
      }
    }

    function tableToXlsx(head: any, filename: any, body: any) {
      const uri = 'data:application/vnd.ms-excel;base64,',
        template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`

      const a = document.createElement('a')
      a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
      a.download = filename
      a.click()
      document.removeChild(a)
    }

    const no1TypeMeterials: any = ref(0)
    const no2TypeMeterials: any = ref(0)
    const localeText1: any = ref(localeText)
    const rules = reactive<any>({
      rawmaterialCode: [{ required: true, message: '原料编号必填' }],
      materialsName: [{ required: true, message: '原料名称必填' }],
      yarnCount: [{ required: true, message: '纱支必填' }],
      daniel: [{ required: true, message: '丹尼尔系数必填' }],
      materialsAttribute: [{ required: true, message: '属性必填' }],
      fNum: [{ required: true, message: 'F数(股数)必填' }],
      attritionCategory: [{ required: true, message: '材料损耗类型必填' }],
      direction: [{ required: true, message: '捻向必填' }],
      appearance: [{ required: true, message: '外观描述必填' }],
      spinningMethod: [{ required: true, message: '纺纱方法必填' }],
      gloss: [{ required: true, message: '光泽必填' }],
      craft: [{ required: true, message: '梳棉工艺必填' }],
      property: [{ required: true, message: '材料损耗率必填' }],
      materialsCategory: [{ required: true, message: '原料类别必填' }],
      unit: [{ required: true, message: '单位必填' }],
    })
    const clearRules = () => {
      let arr = [
        'materialsName',
        'yarnCount',
        'daniel',
        'fNum',
        'attritionCategory',
        'direction',
        'appearance',
        'spinningMethod',
        'gloss',
        'craft',
        'property',
        'materialsCategory',
        'rawmaterialCode',
      ]
      arr.map((item) => {
        rules[item][0]['required'] = false
      })
    }
    const materialsCateChanges = (e: any) => {
      clearRules()
      // formRef.value?.clearValidate()
      if (dataForm.outsideState == 0) {
        if (e == '天丝') {
          setRulesName([
            'yarnCount',
            'daniel',
            'materialsAttribute',
            'fNum',
            'direction',
            'spinningMethod',
            'attritionCategory',
            'property',
            'materialsCategory',
            'unit',
          ])
        }
        if (e == '其他') {
          setRulesName([
            'yarnCount',
            'materialsCategory',
            'daniel',
            'materialsAttribute',
            'unit',
            'attritionCategory',
            'property',
          ])
        }
        if (e == '丝') {
          setRulesName([
            'yarnCount',
            'daniel',
            'materialsAttribute',
            'unit',
            'fNum',
            'appearance',
            'gloss',
            'direction',
            'attritionCategory',
            'property',
            'materialsCategory',
          ])
        }
        if (e == '莱赛尔') {
          setRulesName([
            'yarnCount',
            'daniel',
            'materialsAttribute',
            'unit',
            'fNum',
            'direction',
            'spinningMethod',
            'attritionCategory',
            'property',
            'materialsCategory',
          ])
        }
        if (e == '混纺') {
          setRulesName([
            'yarnCount',
            'daniel',
            'materialsAttribute',
            'unit',
            'fNum',
            'direction',
            'spinningMethod',
            'craft',
            'attritionCategory',
            'property',
            'materialsCategory',
          ])
        }
        if (e == '纯涤') {
          setRulesName([
            'yarnCount',
            'daniel',
            'materialsAttribute',
            'unit',
            'fNum',
            'direction',
            'spinningMethod',
            'attritionCategory',
            'property',
            'materialsCategory',
          ])
        }
        if (e == '包芯氨') {
          setRulesName([
            'yarnCount',
            'daniel',
            'materialsAttribute',
            'unit',
            'fNum',
            'direction',
            'spinningMethod',
            'appearance',
            'attritionCategory',
            'property',
            'materialsCategory',
          ])
        }
        if (e == '包覆纱') {
          setRulesName([
            'yarnCount',
            'daniel',
            'materialsAttribute',
            'direction',
            'spinningMethod',
            'spinningMethod',
            'property',
            'attritionCategory',
            'materialsCategory',
          ])
        }
        if (e == '棉') {
          setRulesName([
            'yarnCount',
            'daniel',
            'materialsAttribute',
            'unit',
            'fNum',
            'direction',
            'spinningMethod',
            'craft',
            'attritionCategory',
            'property',
            'materialsCategory',
          ])
        }
        if (e == '氨纶') {
          setRulesName([
            'yarnCount',
            'materialsCategory',
            'daniel',
            'materialsAttribute',
            'unit',
            'attritionCategory',
            'property',
          ])
        }
        if (e === '电视发射塔') {
          no1TypeMeterials.value = 1
          no2TypeMeterials.value = 0
        } else if (e === '涤纶测试2') {
          no1TypeMeterials.value = 0
          no2TypeMeterials.value = 1
        } else {
          no1TypeMeterials.value = 0
          no2TypeMeterials.value = 0
        }
      } else {
        setRulesName(['materialsName', 'rawmaterialCode', 'materialsCategory', 'yarnCount', 'unit', 'materialsAttribute'])
      }
      console.log(formRef.value)
    }
    const setRulesName = (data: any) => {
      data.reduce((pre: any, cur: any) => {
        rules[cur][0]['required'] = true
        return 0
      }, 0)
    }
    const fuzhi = (val: any) => {
      if (val == '待审核') {
        if (table1Ref.value.getSelectedRows().length === 0) {
          Message.error('请先勾选')
          return
        } else if (table1Ref.value.getSelectedRows().length > 1) {
          Message.error('只能勾选一条')
        }
        let list = table1Ref.value.getSelectedRows().map((o: any) => {
          return {
            yarnCount: o.yarnCount,
            materialsAttribute: o.materialsAttribute,
            outsideState: o.outsideState,
          }
        })

        //判断本集团外加工
        post({
          url: 'product/Rawmaterial/getState',
          data: {
            outsideState: table1Ref.value.getSelectedRows()[0].outsideState,
          },
        }).then(({ code, message }: any) => {
          if (message === '0') {
            //生成原料
            pageData.pageLoading = true
            post({
              url: 'product/Rawmaterial/getCode',
              data: list,
            })
              .then(({ data, code, message }: any) => {
                if (code === 200) {
                  dataForm.rawmaterialCode = data
                  pageData.sideTitle = '新增复制'
                  pageData.showAdd = true
                }
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          } else {
            Message.error(message)
          }
        })
        allDataList = table1Ref.value.getListData()
        idToData = allDataList.filter((item) => item.id == table1Ref.value.getSelectedRows()[0].id)
        console.log('待审核', idToData)
        if (idToData.length > 0) {
          for (let key in idToData[0]) {
            dataForm[key] = idToData[0][key]
          }
        }
      } else {
        pageData.isDetails = false
        if (table3Ref.value.getSelectedRows().length === 0) {
          Message.error('请先勾选')
          return
        } else if (table3Ref.value.getSelectedRows().length > 1) {
          Message.error('只能勾选一条')
          return
        }
        let list = table3Ref.value.getSelectedRows().map((o: any) => {
          return {
            yarnCount: o.yarnCount,
            materialsAttribute: o.materialsAttribute,
            outsideState: o.outsideState,
          }
        })

        post({
          url: 'product/Rawmaterial/getState',
          data: {
            outsideState: table3Ref.value.getSelectedRows()[0].outsideState,
          },
        }).then(({ code, message }: any) => {
          if (message === '0') {
            pageData.pageLoading = true
            post({
              url: 'product/Rawmaterial/getCode',
              data: list,
            })
              .then(({ data, code, message }: any) => {
                if (code === 200) {
                  dataForm.rawmaterialCode = data
                  pageData.sideTitle = '新增复制'
                  pageData.showAdd = true
                }
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          } else {
            Message.error(message)
          }
        })
        allDataList = table3Ref.value.getListData()
        idToData = allDataList.filter(
          (item) => item.id == table3Ref.value.getSelectedRows()[0].id
        )
        console.log('idToData', idToData)
        if (idToData.length > 0) {
          for (let key in idToData[0]) {
            dataForm[key] = idToData[0][key]
          }
        }
      }
    }
    const sunhaolv = ref('')
    const sunhaolvlist = ref([]) as any
    const isSunhaolv = (value: any) => {
      //sessionStorage.setItem("wwwww",JSON.stringify(value))
      //  dataForm.property=value.materialsAttritionRate
      dataForm.property = value.materialsAttritionRate
      //  sunhaolvlist.value=[];
    }
    const foucusSunhaolv = () => {
      post({
        url: 'product/RawmaterialLoss/select',
        data: {
          page: 1,
          size: 30,
          deleteState: 0,
          obsoleteState: 0,
          materialsAttritionCategory: dataForm.attritionCategory,
        },
      }).then(({ data, code }: any) => {
        if (code === 200) {
          sunhaolvlist.value = data.list
          //  sunhaolvlist.value.forEach((d:any) => {
          //     d.materialsAttritionCategory=d.materialsAttritionCategory+"/"+String(d.materialsAttritionRate)
          //  });
          // sessionStorage.setItem("损耗率",JSON.stringify(sunhaolvlist.value))
          sunhaolvlist.value = data.list
          console.log('损耗表', data)
        }
      })
    }
    const blendRatio = ref('')
    const pagingList1: any = ref(pagingList)
    const handoff = (key: any) => {
      biaoji.value = key
      page.value = 1
      doRefresh()
      sessionStorage.setItem('表计', JSON.stringify(biaoji.value))
    }
    const shenhe = () => {
      if (table1Ref.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return
      }
      var shenhelist = [] as any
      table1Ref.value.getSelectedRows().map((o: any) => {
        var obj = {
          id: o.id,
          auditState: 1,
        }
        shenhelist.push(obj)
      })

      post({
        url: 'product/Rawmaterial/audit',
        data: shenhelist,
      }).then(({ message, data, code }: any) => {
        if (code === 200) {
          Message.success('审核成功！')
          page.value = 1
          doRefresh()
        } else {
          Message.error(message)
        }
      })
    }
    const fanshen = () => {
      if (table3Ref.value.getSelectedRows().length === 0) {
        Message.error('请先勾选')
        return
      }
      var shenhelist = [] as any
      table3Ref.value.getSelectedRows().map((o: any) => {
        var obj = {
          id: o.id,
          auditState: 0,
        }
        shenhelist.push(obj)
      })

      post({
        url: 'product/Rawmaterial/audit',
        data: shenhelist,
      }).then(({ message, data, code }: any) => {
        if (code === 200) {
          Message.success('反审成功！')
          page.value = 1
          doRefresh()
        } else {
          Message.error(message)
        }
      })
    }

    //根据账号判断是否为本集团
    const shifoubenjituan = () => {
      post({
        url: '/admin/acl/user/findUserToken',
        data: {},
      })
        .then((res: any) => {
          if (typeof res == 'string') {
            Message.error({
              content: '数据返回异常',
              duration: 5000,
            })
          }
          if (res.code === 200) {
            dataForm.outsideState = res.data.data.judgeGroup
            shifouxiugaibianhao.value = res.data.data.judgeGroup
            if (dataForm.outsideState == 1) {
              materialsCateChanges(dataForm.materialsCategory)
            }
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            })
          }
        })
        .finally(() => {
        })
    }

    const huiche = () => {
      page.value = 1
      doRefresh()
    }

    //生成原料编号
    const shengbianhao = () => {
      post({
        url: 'product/Rawmaterial/getCode',
        data: [
          {
            yarnCount: dataForm.yarnCount,
            materialsAttribute: dataForm.materialsAttribute,
            outsideState: dataForm.outsideState,
          },
        ],
      }).then(({ message, data, code }: any) => {
        if (code === 200) {
          console.log(data)

          dataForm.rawmaterialCode = data
        } else {
          Message.error(message)
        }
      })
    }

    const isshow = ref(true)
    const baocunfuzhi = () => {
      if (biaoji.value == 1) {
        dataForm['id'] = ''

        dataForm.component.map((o: any) => {
          o.id = ''
        })

        //sessionStorage.setItem('复制功能', JSON.stringify(gridOption.value.getSelectedRows()))
        post({
          url: '/product/Rawmaterial/addCopy',
          data: dataForm,
        }).then(({ message, data, code }: any) => {
          if (code === 200) {
            Message.success(message)
            pageData.showAdd = false
            doRefresh()
          } else {
            Message.error(message)
          }
        })
      } else {
        dataForm['id'] = ''

        dataForm.component.map((o: any) => {
          o.id = ''
        })
        //sessionStorage.setItem('复制功能', JSON.stringify(gridOption.value.getSelectedRows()))
        post({
          url: '/product/Rawmaterial/addCopy',
          data: dataForm,
        }).then(({ message, data, code }: any) => {
          if (code === 200) {
            Message.success(message)
            pageData.showAdd = false
            doRefresh()
          } else {
            Message.error(message)
          }
        })
      }
    }
    //判断账号是本集团还是外加工，判断编号是否可以修改
    const shifouxiugaibianhao = ref(null)
    //判断原料名称是否重复
    const yuanliaoischongfu = () => {
      post({
        url: '/product/Rawmaterial/getRawmaterialsNameDrop',
        data: { materialsName: '', auditState: 1 },
      }).then(({ message, data, code }: any) => {
        if (code === 200) {
          data.map((o: any) => {
            if (o.materialsName == dataForm.materialsName) {
              // Message.success(message)
              return
            }
          })
        } else {
          Message.error(message)
        }
      })
    }
    const cailiaoSearch = (value: any) => {
      console.log(value)
      post({
        url: 'product/RawmaterialLoss/select',
        data: {
          page: 1,
          size: 30,
          deleteState: 0,
          obsoleteState: 0,
          materialsAttritionCategory: value,
        },
      }).then(({ data, code }: any) => {
        if (code === 200) {
          sunhaolvlist.value = data.list
          //  sunhaolvlist.value.forEach((d:any) => {
          //     d.materialsAttritionCategory=d.materialsAttritionCategory+"/"+String(d.materialsAttritionRate)
          //  });
          // sessionStorage.setItem("损耗率",JSON.stringify(sunhaolvlist.value))
          sunhaolvlist.value = data.list
          console.log('损耗表', data)
        }
      })
    }
    const headerShow = ref<boolean>(true)
    // ['查询', '新增', '复制', '删除', '导出', '反审']
    //原料列表 成分里序号 前端自增
    function increasingSerialNumber() {
      if (dataForm.component.length > 0) {
        dataForm.component.forEach(function (o: any, index: any) {
          o['rawmaterialComponentCode'] = index + 1 + ''
        })
      }
    }

    return {
      gridReady3,
      gridOption3,
      saveOrUpdateGridState01,
      colState,
      saveOrUpdateGridState02,
      colState2,
      colState3,
      focusYlAttribute,
      headerShow,
      cailiaoSearch,
      shifouxiugaibianhao,
      isshow,
      shengbianhao,
      huiche,
      yuanliaobianhao,
      yuanliaomingcheng,
      shenhe,
      fanshen,
      biaoji,
      handoff,
      pagingList1,
      blendRatio,
      isSunhaolv,
      sunhaolvlist,
      foucusSunhaolv,
      sunhaolv,
      fuzhi,
      no1TypeMeterials,
      no2TypeMeterials,
      materialsCateChanges,
      localeText1,
      exports,
      focusYarnCountType,
      optionsSearch,
      DanielS,
      fieldChange,
      changeAttribute,
      changeState,
      getYlAttribute,
      defaultColDef,
      total,
      PageSize,
      change1,
      page,
      size,
      yarnNamesClick,
      deleteHandler,
      scrollbar,
      sideOk,
      formRef,
      dataForm,
      addHandler,
      selectedRowKeys,
      s: selectedRowKeysCf.selectedRowKeys,
      pagination,
      tableColumns,
      clearRules,
      table,
      rowKey,
      pageData,
      queryData,
      // changeFirm,
      editHandler,
      tableColumns2,
      addLine,
      gc,
      selectHandler,
      // showInput,
      delLine,
      changeCf,
      isChiese,
      inputBlur,
      getProductUnitDrop,
      getProductTypeDrop,
      getColorDrop,
      getYarnDrop,
      yarnCountChange,
      materialsNameRules,
      getFsData,
      getCfData,
      // focusSel,
      // focusSel1,
      // focusSel2,
      // focusSel3,
      // focusSel4
      foucus1,
      foucus2,
      foucus3,
      foucus4,
      foucus5,
      handleSearch3,
      handleChange,
      gridReady,
      gridReady2,
      gridOption2,
      rules,
      table1Ref,
      configaggrid,
      permissionStore,
      table2Ref,
      configaggrid2,
      handleCollapseChange,
      table3Ref,
      configaggrid3,
      handlerDrawerClose
    }
  },
  components: { Toolbar,  },
}
</script>

<style scoped lang="less">
:deep(.arco-input-wrapper) {
  padding: 0;
}

:deep(.arco-collapse-item-active > .arco-collapse-item-header) {
  background: #00a8ea !important;
}
</style>
